<template>
  <div>
    <el-row>
      <el-form>
        <el-col :span="6">
          <el-input
            placeholder="请输入资源名称"
            v-model="resForm.qname"
          ></el-input>
        </el-col>
        <el-col :offset="1" :span="6">
          <el-input
            placeholder="请输入资源内容"
            v-model="resForm.qresource"
          ></el-input>
        </el-col>
        <el-col :offset="1" :span="3">
          <el-button @click="handleQuery(1)"> 查询 </el-button>
        </el-col>
        <el-col :offset="3" :span="4">
          <el-button @click="handleAdd()" type="primary">
            <i class="el-icon-plus"></i>
            新增部门
          </el-button>
        </el-col>
      </el-form>
    </el-row>
    <el-row class="mt-40">
      <el-col>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column
            align="center"
            label="序号"
            type="index"
            width="220"
          />
          <el-table-column
            align="center"
            label="资源id"
            prop="treeid"
            width="220"
          >
            <template slot-scope="scope">
              {{ scope.row.treeid }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="资源名称"
            prop="name"
            width="220"
          >
            <template slot-scope="scope">
              {{ scope.row.name }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="资源内容"
            prop="resource"
            width="220"
          >
            <template slot-scope="scope">
              {{ scope.row.resource }}
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="220">
            <template slot-scope="scope">
              <el-button @click="handleAdd(scope.row)" size="small"
                >修改
              </el-button>
              <el-button
                @click="handleDel(scope.row)"
                size="small"
                type="primary"
              >
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row class="mt-40" type="flex" justify="end">
        <el-pagination
                :current-page="pages.curPage"
                :page-size="10"
                :page-sizes="[5,10]"
                :total="pages.totalCount"
                @current-change="handleCurrentChange"
                layout="total,sizes,prev,pager,next,jumper"
        />
    </el-row>
    <res-model :resModelForm="resModelForm" :disDilog="disDilog"> </res-model>
    <error-dialog @del="handleDelId">
      <template slot="body">
        <p class="tc ft-18">你确定要删除本条记录吗？</p>
      </template>
    </error-dialog>
  </div>
</template>
<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import { ResForm, ResModelForm, Dialog, Pages } from "@/interface/interface";
import ResModel from "@/views/rightsmanagement/permissmodels/resModel.vue";
import { resdata, resdel } from "@/api/api";
import ErrorDialog from "@/components/ErrorDialog.vue";
import {State,Mutation} from 'vuex-class';
import {Notification} from 'element-ui';
@Component({
  components: { ErrorDialog, ResModel }
})
export default class ResourceManage extends Vue {
  protected name!: "ResourceManage";
  @State('isVisible') handleStateVisible:any;
  @State('id') handleStateId:any;
  @Mutation('handleVisible') handleMutationVisible:any;
  @Mutation('handleCloseVisible') handleCloseVisible:any;
  protected resForm: ResForm = {
    qname: "",
    qresource: ""
  };
  get treeId(){
    return this.handleStateId;
  }

  protected tableData = [];
  protected resModelForm: ResModelForm = {
    ordernum: "",
    name: "",
    resource: "",
    remark: ""
  };
  protected disDilog: Dialog = {
    title: "",
    options: "",
    isDialog: false
  };
  protected pages: Pages = {
    totalCount: 1,
    curPage: 1,
    pageNum: 1
  };
  protected created() {
    this.handleQuery(1);
  }

  /*
   * 查询
   * */
  protected async handleQuery(pageNum = 1) {
    try {
      const { qname, qresource } = this.resForm;
      const res = await resdata({ qname, qresource, pageNum });
      if (res) {
        const { success, message, object } = res;
        if (success) {
          const { datas, ...pages } = object;
          this.tableData = datas;
          this.pages = pages;
        } else {
          this.$message({
            type: "error",
            message: "数据出错"
          });
        }
      } else {
        this.$message({
          type: "error",
          message: "数据出错"
        });
      }
    } catch (error) {
      this.$notify({
        title: "error",
        message: error
      });
    }
  }

  /*
   * 添加
   * */
  protected handleAdd(params: any) {
    const disDilogFn = (title: string, options: string, isDialog: boolean) => {
      this.disDilog = {
        title: title,
        options: options,
        isDialog: isDialog
      };
      return this.disDilog;
    };
    if (params) {
      Object.assign(this.resModelForm, params);
      disDilogFn("编辑资金管理", "edit", true);
    } else {
      disDilogFn("添加资金管理", "add", true);
    }
  }

  /*
   * 删除
   * */
  protected async handleDel(params: any) {
    const { treeid } = params;
    const isVisible= !this.handleStateVisible;
    this.handleMutationVisible({id:treeid,isVisible:isVisible})
  }
  protected async handleDelId(){
    const res=await resdel({treeId:this.treeId});
    if(res){
      const {success}=res;
      if(success){
        this.$notify({
          title:'提示',
          message:'删除成功'
        });
        this.handleCloseVisible({value:this.handleStateVisible});
        this.handleQuery()
      }
    }else{
      this.$notify({
        title:'提示',
        message:'删除失败'
      })
    }
  }

  /*
  * 分页
  * */
  protected handleCurrentChange(val: number){
    console.log(val);
    this.handleQuery(val)
  }


}
</script>

<style lang="scss" scoped></style>
